// webpack 默认的配置文件
// 当我们执行npm run serve的时候，webpack会首先查找webpack.config.js文件
// 如果有这个文件，则会读取这个文件中的代码(配置)，然后webpack就会根据这个文件中的
// 配置进行打包和解析代码
const path = require('path'); // path模块是nodejs内置模块 (作用1：用于路径拼接)
const htmlPlugin  = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')

console.log(7, __dirname); // __dirname 表示获取到当前目录的绝对路径 nodejs内置的属性
module.exports = {
    entry: './src/app.js', // 表示指定想要打包转换的文件(配置入口文件)
    output: { // 用于规定打包转换好的文件目录（就是把文件打包到哪里去） --- 配置出口文件
        path: path.join(__dirname, 'test'), // 保存打包转换的文件的目录
        filename: 'app.js' // 打包后的文件名
    },
    plugins: [
        /**
         * 
         * html-webpack-plugin插件的使用
         * 为什么要使用这个插件？
         * 答：因为到目前为止，我们想要使用打包好的js,需要我们自己手动引入，这样太不智能了
         * 也是比较麻烦。
         * 因此能不能在我们打包js文件的同时把打包的js引入到html文件中呢？
         * 答：可以 ，我们就可以利用html-webpack-plugin插件来实现
         * 
         * html-webpack-plugin使用步骤：
         * 1、下载 npm i html-webpack-plugin -D
         * 2、在配置文件中引入  require
         * 3、添加如下配置 （实例化插件）
         * */ 
        new htmlPlugin({
            template: './index.html'
        }),
        new VueLoaderPlugin()
    ],
    /**
     * webpack-dev-server插件的使用
     * 
     * 为什么要使用这个插件？
     * 答：因为如果没有这个插件的时候，发现没当我们改变代码，要查看最新的效果的的时候
     * 必须要重新打包才能看到效果，这种开发方式效率特别低.
     * 那如何才能实时的自动的帮我们打包代码 能够立刻看到效果呢？
     * 答：就可以利用webpack-dev-server插件来实现这个功能
     * 
     * webpack-dev-server插件的使用步骤：
     * 1、下载 npm i webpack-dev-server@3.11.0 -D
     * 2、在webpack.config.js中添加如下配置
     * 3、在package.json文件中修改 打包命令 来启动 webpack-dev-server插件
     *    "scripts":{
     *        "dev": "webpack serve"
     *      }
     * 
     * 这个插件也叫 “开发服务器”
     * 
     * 通过这个开发服务器打包的代码 是打包在内存中 也就是说在我们电脑的磁盘上是看不到的
     * 
     * 
     * */ 
    devServer: { 
        open: true,
        host: '127.0.0.1',
        port: 8080
    },
    /**
     * 为什么要用loader？
     * 答：因为webpack默认情况下只能处理js文件
     * 因此其他文件必须通过loader来进行处理
     * */ 
    module: { // 注意： module rules test use 都是webpack规定的属性 不能修改
        rules: [
            { // 配置处理css文件的加载器
                test: /\.css$/, // 匹配以.css结尾的文件
                /**
                 * style-loader: 把解析后的css代码插入到html文档中
                 * css-loader: 让webpack能够通过这个加载器处理css文件
                 * 
                 * 我们必须要要让webpack先用css-loader处理css文件 再通过style-loader把处理函数的css代码插入到html文档中
                 * 因此use 里面的 加载器的配置 位置不能调换
                 * 
                 * 那为什么use里面的配置是先写 style-loader 再写css-loader呢？
                 * 答：因为该文件的代码执行顺序是 从右到左
                 * 
                 * */ 
                use: [ 'style-loader','vue-style-loader','css-loader' ]
            },
            { // 配置处理less文件的加载器
                test: /\.less$/,
                use: [
                    {loader: 'style-loader'},
                    {loader: 'css-loader'},
                    {loader: 'less-loader'},
                ]
            },
            { // 图片
                test: /\.jpg|png|gif$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // limit设置一个临界点，当这个图片大小小于这个
                        // 临界值的时候，webpack会把图片转为base64字符串
                        // 打包进代码中，否则保持图片原来的状态 打包为一张图片在内存中
                        limit: 2228, // 限制图片的大小
                        outputPath: 'image' // 打包的输出路径
                    }
                }
            },
            { // js语法降级
                test: /\.js$/,
                exclude: /node_modules/, // 排除下载插件中的js文件
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            { // vue单文件处理
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            // {
            //     test: /\.css$/,
            //     use: [
            //       'vue-style-loader',
            //       'css-loader'
            //     ]
            //   }
        ]
    }
}